<script setup>
import api from "./api";
import SelectShippingMethod from "@/components/Selects/SelectShippingMethod/index.vue";
import { ElMessage } from "element-plus"
const emit = defineEmits(['update:modelValue', 'submit'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  selectIds: {
    type: Array,
    default: () => [],
  },
})

const form = ref({
  shipping_method: '',
  logistics_id: []
})
const tableData = ref([])
const tableRef = ref([])
const optionList = ref({
  logistics: []
})
const pager = reactive({
  totalResult: 1,
  currentPage: 1,
  pageSize: 10,
})

const checkboxConfig = reactive({
  reserve: true,
})

const initData = (query = {}) => {
  api.apiGetShippingMethods({...query, ...form.value}).then(({total, data: list}) => {
    tableData.value = list
    pager.totalResult = total
    if (query.pageNumber) {
      pager.pageNum = query.pageNum
      pager.pageSize = query.pageSize
    }
  })
}

const pageChange = () => {
  initData({ pageNum: pager.currentPage, pageSize: pager.pageSize })
}

const handleSearch = () => {
  initData({pageNum: 1, pageSize: pager.pageSize})
}

const handleDialogOk = () => {
  const checkedRecords = tableRef.value.getCheckboxRecords()
  if (!checkedRecords.length) {
    return ElMessage({message: "最少选中一条数据！", type: 'error'})
  }
  emit('submit', checkedRecords)
  handleClose()
}

const radioConfig = reactive({
  reserve: true,
  checkMethod({row}) {
    const {selectIds = []} = props
    return !selectIds.includes(row.sku)
  }
})

const initOptionList = async () => {
  const resLogistics = await api.apiGetLogistics()
  optionList.value.logistics = resLogistics.data
}

onMounted(() => {
  initData()
  initOptionList()
})

watch(() => props.selectIds, list => {
  checkboxConfig.checkRowKeys = list
}, {deep: true, immediate: true})

const handleClose = () => {
  emit('update:visible', false)
}
</script>

<template>
  <el-dialog
      :model-value="visible"
      draggable
      ref="tableRef"
      :close-on-click-modal="false"
      title="添加运输方式"
      @close="handleClose"
      align-center
      destroy-on-close
      width="800px">
    <div class="search mb-4 mt-4 flex">
      <el-space>
        <el-select v-model="form.logistics_id"
                   placeholder="物流商"
                   collapse-tags
                   clearable
                   filterable
                   style="width: 240px"
                   multiple>
          <el-option v-for="item in optionList.logistics"
                     :value="item.id"
                     :key="item.id"
                     :label="item.logistics_name"
          />
        </el-select>
        <SelectShippingMethod v-model="form.shipping_method"
                              collapse-tags
                              clearable
                              filterable
                              multiple
                              style="width: 240px"
                              placeholder="运输方式"/>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-space>
    </div>
    <vxe-table
        ref="tableRef"
        row-id="id"
        :checkbox-config="checkboxConfig"
        :height="300"
        :column-config="{ resizable: true }"
        :row-config="{ keyField: 'id', isHover: true }"
        :data="tableData"
        :radio-config="radioConfig"
    >
      <vxe-column type="checkbox" width="50"/>
      <vxe-column title="物流商" field="logistics_name"/>
      <vxe-column title="运输方式" field="channel_name"/>
    </vxe-table>
    <template #footer>
      <!-- <div>
        <vxe-pager
            :border="false"
            perfect
            v-model:current-page="pager.currentPage"
            v-model:page-size="pager.pageSize"
            :total="pager.totalResult"
            :page-sizes="[10, 20, 100]"
            @page-change="pageChange"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'Sizes',
              'FullJump',
              'Total',
            ]"
        >
        </vxe-pager>
      </div> -->
      <div>
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleDialogOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>